<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			Enter Charifier
		</title>
		<link href="styles/form.css" rel="stylesheet">
	</head>
	<body>
		<section id="sign">
			<ul>
				<li>
					<button id="notSelected" onclick="changeId(event)">Register</button>
					<fieldset>
						<legend>Register</legend>
						<form method="post">
							<table>
								<tr>
									<td>
										<label for="username">Username:</label>
									</td>
									<td>
										<input type="text" id="username">
									</td>
								</tr>
								<tr>
									<td>
									<label for="username">First  name:</label>
									</td>
									<td>
									<input type="text" id="firstName">
									</td>
								</tr>
									<td>
									<label for="username">Second name:</label>
									</td>
									<td>
									<input type="text" id="secName">
									</td>
								<tr>
									<td>
									<label for="username">Family:</label>
									</td>
									<td>
									<input type="text" id="family">
									</td>
								</tr>
								<tr>
									<td>
									<label for="username">Password:</label>
									</td>
									<td>
									<input type="text" id="password">
									</td>
								</tr>
							</table>
						</form>
					</fieldset>
				</li>
				<li>
					<button id="selected" onclick="changeId(event)" >Login</button>
					<fieldset>
							<legend>Login</legend>
						<form method="post">
							<label for="username">Username:</label>
							<input type="text" id="username">
							<label for="username">Password:</label>
							<input type="text" id="password">
						</form>
					</fieldset>
				</li>
			</ul>
		</section>
		<script type="text/javascript">
			function changeId(event){
				if (event.target.id != 'selected'){
					var notSelected = document.getElementById('notSelected');
					var selected = document.getElementById('selected');
					selected.id = 'notSelected';
					notSelected.id='selected';
				}
				
				//document.getElementById('notSelected').addEventListener("click", changeId(), true);
			}

		</script>
	</body>
	<footer>
	</footer>
</html>